<template>
    <van-tabbar v-model="active" active-color="#594094" @change="onChange">
        <van-tabbar-item name="math" replace to="/">
            <span>考研数学</span>
            <template #icon="props">
                <img :src="props.active ? mathOn : math" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item name="collect" replace to="/collect">
            <span>我的收藏</span>
            <template #icon="props">
                <img :src="props.active ? collectOn : collect" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item name="wrong" replace to="/wrong">
            <span>错题本</span>
            <template #icon="props">
                <img :src="props.active ? wrongOn : wrong" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item name="wx" replace to="/addwx">
            <span>加老师微信</span>
            <template #icon="props">
                <img :src="props.active ? wxOn : wx" />
            </template>
        </van-tabbar-item>
    </van-tabbar>
</template>
<script setup>

import { ref,onMounted } from "vue"
import math from "../../assets/imgs/math.png"
import mathOn from "../../assets/imgs/math-on.png"
import wrong from "../../assets/imgs/wrong.png"
import wrongOn from "../../assets/imgs/wrong-on.png"
import collect from "../../assets/imgs/collect.png"
import collectOn from "../../assets/imgs/collect-on.png"
import wx from "../../assets/imgs/wx.png"
import wxOn from "../../assets/imgs/wx-on.png"

const active = ref("math");

onMounted(() =>{
    if(sessionStorage.getItem("key")){
        active.value = sessionStorage.getItem("key")
    }
})

const onChange = (index) =>{
    sessionStorage.setItem("key",index)
}

</script>
<style scoped>
.van-tabbar {
    border-top: 1px solid #DDD;
}
</style>